<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.test{
				width: 100px;
				height: 100px;
				background: skyblue;
				position: absolute;
				top: 0;
				left: 0;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="test"></div>
		<script type="text/javascript">
			//1、模拟双击事件
			var test = document.querySelector(".test");
			function addDBLClick(el,callback){
				var isClick = false;
				el.addEventListener("click",function(){
					if(isClick == true){
						callback();
						isClick = false;
						clearTimeout(t);
					}
					else{
						isClick = true;
						var t = setTimeout(function(){
							isClick =false;
						},500)
					}
				})
			}
			addDBLClick(test,function(){
				console.log(123)
			});
			
			
			//2、元素跟随鼠标移动
			test.onmousedown = function(){
				document.onmousemove =  function(e){
					test.style.left = e.clientX-50 + "px";//-50,使鼠标居图片中
					test.style.top = e.clientY-50 + "px";
				}
				document.addEventListener("mouseup",function(e){
					document.onmousemove = null;
				})
			}
			
			
		</script>
	</body>
</html>
